<template name="goods-order">
	<view>
		<view class="list" v-for="item in list" :key='item.id' @click="goto(item)">
			<view class="left">
				<image :src="item.goods.avatar" class="img"></image>
			</view>
			<view class="center flex-1 ml-3 ">
				<view class="name">
					<view class="text-truncate">{{item.name}}</view>
					<view class="size">库存：{{item.goods.store}}</view>
					<view class="size">订单编号：{{item.no}}</view>
				</view>
				<view class="price">
					￥{{item.goods.price}}
				</view>
			</view>
			<view class="right mr-2">
				<view v-if="types==0"
					:class="['types d-flex align-items-center justify-content-center',item.state==1?'types_yqx':''||item.state==2?'types_aaa':''||item.state==3?'types_dfk':item.state==4?'types_ywc':item.state==9?'types_yqx':'']">
					{{item.state==1?"待确定":item.state==2?"待收货":item.state==3?"已完成":item.state==4?"已取消":"无"}}
				</view>
				<view v-if="types==1" class="types types_yqx d-flex align-items-center justify-content-center">
					待确定
				</view>
				<view v-if="types==2" class="types types_aaa d-flex align-items-center justify-content-center">
					待收货
				</view>
				<view v-if="types==3" class="types types_dfk d-flex align-items-center justify-content-center">
					已完成
				</view>
				<view v-if="types==4" class="types types_ywc d-flex align-items-center justify-content-center">
					已取消
				</view>
				<view v-if="types==9" class="types types_yqx d-flex align-items-center justify-content-center">
					已取消
				</view>
				<view class="count">
					x1
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "goods-order",
		data() {
			return {

			};
		},
		// 此处定义传入的数据,属性
		props: {
			list: {
				type: Array,
				value: null
			},
			types: {
				type: Number,
				value: null
			}
		},
		//组件生命周期
		created: function(e) {

		},
		methods: {
			goto(item) {

				uni.navigateTo({
					url: '/pages/order/details/details?key=' + encodeURIComponent(JSON.stringify(item))
				})
			},

		}

	}
</script>

<style lang="scss">
	.list {
		width: 672rpx;
		height: 208rpx;
		background: #fff;
		box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
		border-radius: 24rpx;
		margin-top: 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.left {
			display: flex;

			.img {
				width: 136rpx;
				height: 136rpx;
				margin-left: 10rpx;
				border-radius: 8%;
			}
		}

		.center {
			width: 170rpx;
			display: flex;
			height: 136rpx;
			flex-direction: column;
			justify-content: space-between;

			.name {
				font-size: 26rpx;
				color: #3E3E3E;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.size {
				font-size: 22rpx;
				color: #8D8D8D;
			}

			.price {
				color: #DD6C26;
				font-weight: bold;
			}
		}

		.right {
			display: flex;
			height: 136rpx;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.count {
				font-size: 22rpx;
				color: #8D8D8D;
			}

			.types {
				width: 120rpx;
				height: 50rpx;
				color: #FFFFFF;
			}

			.types_dfk {
				background-color: #00aaff;
			}


			.types_ywc {
				background-color: #0BC261;
			}

			.types_yqx {
				background-color: #FF976A;
			}

			.types_aaa {
				background-color: #aaaa00;
			}
		}
	}
</style>